<style lang="less" scoped>
.swiper-container {
  background-color: #67baf2;
  height: 1.26rem;
  padding: 0.15rem 0 0.18rem 0;
  .swiper-slide-active {
    border: 0.01rem solid #fff;
  }
}
.spell-box {
  padding: 0.1rem 0;
  text-align: center;
  .am-button{
    width: 90%;
  }
}
</style>
<template>
  <div>
    <!-- Swiper -->
    <div id="topic" class="swiper-container">
      <div class="swiper-wrapper">
        <div v-for="item in themes" class="swiper-slide" :style="{ backgroundImage: 'url('+item.imgUrl+')'}"></div>
      </div>
    </div>
    <div v-if="isLoad">
      <adytum-info :info="info"></adytum-info>
      <date-select :info="info"></date-select>
      <div class="spell-box">
        <button @click="linkSpell" class="am-button">随心拼</button>
      </div>
    </div>
    <div v-show="!isLoad" class="am-loading page">
      <i class="am-icon loading" aria-hidden="true"></i>
      <div class="am-loading-text">加载中</div>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper';
import adytumInfo from '@/components/panes/adytum.info.vue';
import dateSelect from '@/components/panes/date.select.vue';
import http from '@/services/xhr';
import apiSetting from '@/services/api';

export default {
  name: 'index',
  data() {
    return {
      isLoad: false,
      themes: [],
      info: {}
    };
  },
  components: {
    adytumInfo,
    dateSelect
  },
  mounted() {
    http(apiSetting.getThemes)
      .then(res => {
        this.themes = res.data.data.list;
        this.info = this.themes[0];
      })
      .then(() => {
        this.isLoad = true;
        this.swiperInit();
      });
  },
  methods: {
    swiperInit() {
      let _that = this;
      var swiper = new Swiper('#topic', {
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: '4',
        coverflowEffect: {
          rotate: 0,
          stretch: -10,
          depth: 50,
          modifier: 2,
          slideShadows: true
        }
      });
      swiper.on('slideChange', function() {
        _that.info = _that.themes[this.activeIndex];
      });
    },
    linkSpell() {
      let userId = 123;
      this.$router.push({ path: `/spell/${userId}` });
    }
  }
};
</script>

